<template>
<div class="G-gov">
  <unfold>
    <!-- 左侧角色列表 -->
    <template v-slot:tree-list>
      <div class="left box relative-position">

        <!-- header -->
        <div class="box-header bg-primary text-white text-weight-regular">
          <q-icon name="iconfont icontubiao-103" color="white" class="q-mr-sm" />
          <span class="head-title vertical-middle user-select-none">我的空间</span>
        </div>

        <!-- 列表 -->
        <q-scroll-area class="box-content bg-white" :thumb-style="CommonConfig.thumbStyle">
          <q-list style="min-width: 100px;">
            <div v-for="(item, index) in leftList" :key="index">
              <q-item
                class="role-item"
                :active="leftSelName === item.name"
                @click="leftSelFun(item)"
                active-class="activated"
                clickable
                v-ripple
              >
                <q-item-section avatar>
                  <q-icon :name="'iconfont '+item.icon" :color="leftSelName === item.name?'primary':'dark'" />
                </q-item-section>
                <q-item-section>
                  {{ item.label }}
                </q-item-section>
              </q-item>
              <q-separator />
            </div>
          </q-list>
        </q-scroll-area>
        <div class="left-foot">
          <div class="txt font-size-14 row no-wrap items-center">
            <span class="num"><span class="font-size-18">{{useSpace}}</span>/5G</span>
            <q-space />
            <q-btn @click="noticeMessage('请联系系统管理员')" flat dense color="primary" size="12px" label="扩展" />
          </div>
          <progress-bar width="100%" :value="useSpacePercent" />
        </div>
      </div>
    </template>

    <!-- 右侧 card -->
    <template v-slot:content>
      <div class="right box" style="padding: 0">
        <right-all v-if="leftSelName === 'all'" />
        <right-recycle v-if="leftSelName === 'recycle'" />
        <right-last-use v-if="leftSelName === 'lastUse'" />
      </div>
    </template>
  </unfold>
</div>
</template>

<script>
import Unfold from 'src/components/unfold'
import RightAll from './components/right-all'
import RightRecycle from './components/right-recycle'
import RightLastUse from './components/right-last-use'
import ProgressBar from 'src/components/progress-bar'
import { getUseSpaceSize } from 'src/boot/program/G-gov'
import { sizeFormat } from 'src/assets/js/util'
import refreshMixin from '../../assets/js/refresh-mixin'

export default {
  name: 'g-gov',
  mixins: [refreshMixin],
  data () {
    return {
      leftList: [ // 左侧列表数据
        {
          label: '全部文件',
          name: 'all',
          icon: 'icontubiao-54'
        },
        {
          label: '回收站',
          name: 'recycle',
          icon: 'icontubiao-105'
        },
        {
          label: '最近使用',
          name: 'lastUse',
          icon: 'icontubiao-124'
        }
      ],
      leftSelName: 'all', // 左侧选中name
      useSpace: 0, // 已使用的空间
      useSpacePercent: 0 // 已使用的空间
    }
  },
  created () {
    this.getSpace()
  },
  methods: {
    /**
     * 全局刷新数据
     * author: xueli
     */
    refreshInfo () {
      console.log('执行了吗')
      let leftSelName = this.leftSelName
      this.leftSelName = ''
      this.$nextTick(() => {
        this.leftSelName = leftSelName
      })
    },
    // 获取已经使用的容量
    getSpace () {
      let totalSpace = 1024 * 1024 * 1024 * 5 // 5G
      getUseSpaceSize().then(res => {
        console.log(res)
        this.useSpace = sizeFormat(res.data)
        this.useSpacePercent = parseFloat((res.data / totalSpace * 100).toFixed(2))
      })
    },
    // 左侧选中函数
    leftSelFun (item) {
      this.leftSelName = item.name
    },
    // 注意提示
    noticeMessage (message) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-28" ></i> 提示</p>`,
        message: message,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        }
      })
    }
  },
  components: {
    Unfold,
    RightAll,
    RightRecycle,
    RightLastUse,
    ProgressBar
  }
}
</script>

<style scoped lang="stylus">
.G-gov{
  .box {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    height 100%

    .box-header {
      flex 40px 0
      padding 0 20px
      line-height 40px
      font-size 18px
    }

    &.left {
      .box-content {
        flex 1
        padding-bottom 20px

        .role-item {
          padding-left 30px
          font-size 16px

          &.activated {
            background #cfd6fe
            color $primary
          }

          &:hover {
            background #e8ebff

            /deep/ .q-focus-helper {
              display none
            }
          }
        }

        .q-separator {
          margin-left 20px
          width calc(100% - 40px)
        }
      }
      .left-foot{
        position absolute
        bottom 20px
        left 0
        width 100%
        padding 0 20px
        .txt{
          color $primary
          line-height 32px
        }
      }
    }

    &.right {
      .box-content {
        display flex
        flex-direction column
        flex 1
        padding-top 5px
      }
    }
  }
}
</style>
